<template>
  <el-dialog
    title="价格方案详情"
    custom-class="custom-class-line"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1000px"
    @close="closeDialog">
    <div v-loading="loading">
      <el-form :model="form" ref="form" size="small" label-width="90px" label-position="right">
        <div class="flex">
          <el-form-item style="width:45%" label="方案名称">
            {{form.planName}}
          </el-form-item>
          <!--          <el-form-item label="运输类型">-->
          <!--            {{selectDictLabel(dict.type.transport_type, form.transportType)}}-->
          <!--          </el-form-item>-->
          <el-form-item label="状态">
            <span v-if="form.status === '0'">启用</span>
            <span v-else-if="form.status === '1'">禁用</span>
          </el-form-item>
        </div>
        <!--        <div class="flex">
                  <el-form-item style="width:45%" label="计费方式">
                    {{selectDictLabel(dict.type.price_method, form.feeMode)}} <span v-if="form.addFeeMode === '1'">+ 里程</span>
                  </el-form-item>
                  <el-form-item label="状态">
                    <span v-if="form.status === '0'">启用</span>
                    <span v-else-if="form.status === '1'">禁用</span>
                  </el-form-item>
                </div>-->
        <PriceSelectDetail ref="weight" v-if="['weight'].includes(form.feeMode)" feeMode="weight" :data="form.weightList" />
        <PriceSelectDetail ref="volume" v-if="['volume'].includes(form.feeMode)" feeMode="volume" :data="form.volumeList" />
        <PriceSelectDetail ref="pieces" v-if="['pieces'].includes(form.feeMode)" feeMode="pieces" :data="form.piecesList" />
        <div class="flex pl90" v-if="form.feeMode === 'volumeWeight'">
          <el-form-item label-width="0" style="width:45%" label="">*用于计算体积重量，如：体积重量=长×宽×高/轻泡系数*</el-form-item>
          <el-form-item label-width="90px" label="轻泡系数">
            {{form.waterProof}}
          </el-form-item>
        </div>
        <div class="flex mb-2" style="margin-bottom: 10px;padding-left: 80px;" v-if="form.feeMode === 'weightMultiMileage'">
          <el-form-item label-width="80px" class="mb5" label="最低计重" prop="waterProof" >
            {{ form.waterProof }} 吨
          </el-form-item>
        </div>
        <!--        <PriceSelectDetail ref="volumeWeight" v-if="['volumeWeight'].includes(form.feeMode)" feeMode="volumeWeight" :data="form.volumeWeightList" />-->
        <PriceSelectDetail ref="mileage" v-if="['mileage', 'weightMultiMileage'].includes(form.feeMode) || form.addFeeMode === '1'" feeMode="mileage" :data="form.mileageList"/>
        <!--        <el-form-item label="关联区域" class="position-relative">
                  <template v-if="form.distLineList && form.distLineList.length">
                    <div style="background-color: #D7D7D7;" class="pl10" v-for="item in form.distLineList" :key="item.distId">
                      {{item.distName}} 【包含{{item.lineNum}}条线路】
                    </div>
                    <el-tag style="position:absolute;right:0;top:0" type="info">共{{total1}}个省市区域，已选择{{form.distLineList && form.distLineList.length || 0}}个省市区域</el-tag>
                  </template>
                  <template v-else>
                    <el-empty :image-size="80" description="暂无关联区域"></el-empty>
                  </template>
                </el-form-item>
                <el-form-item label="关联线路" class="position-relative">
                  <template v-if="form.lineList && form.lineList.length">
                    <div style="background-color: #D7D7D7;" class="pl10" v-for="item in form.lineList" :key="item.lineId">
                      {{item.lineName}} {{selectDictLabel(dict.type.line_scope, item.lineScope)}} {{selectDictLabel(dict.type.line_type, item.lineType)}}【{{selectDictLabel(dict.type.line_flag, item.lineFlag)}}】 {{ (item.stationList || []).map(v => v.branchDept && v.branchDept.deptCode).join('>') }}
                    </div>
                    <el-tag style="position:absolute;right:0;top:0" type="info">共{{total2}}条线路，已选择{{form.lineList && form.lineList.length || 0}}条线路</el-tag>
                  </template>
                  <template v-else>
                    <el-empty :image-size="80" description="暂无关联线路"></el-empty>
                  </template>
                </el-form-item>-->
      </el-form>
      <div class="text-center">
        <el-button type="canceL" @click="closeDialog">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import PriceSelectDetail from "../components/priceSelectDetail.vue"
import {
  pricePlanDetail,
} from "@/api/system/price";
import { getAllCityInfo  } from "@/api/login";
import {
  onlineList,
} from "@/api/system/line";
export default {
  components: {
    PriceSelectDetail
  },
  dicts: ['transport_type','price_method','line_scope','line_direct','line_type', 'line_flag', 'dept_type'],
  data() {
    return {
      dialogVisible: false,
      form: {},
      loading: false,
      total1:0,
      total2:0
    };
  },
  methods: {
    showDialog(row) {
      this.dialogVisible = true
      this.loading = true;
      pricePlanDetail(row.id).then(response => {
        this.form = response.data;
        this.form.mileageList = this.form.segList && this.form.segList.filter(v => v.feeMode === 'mileage') || []
        this.form.weightList = this.form.segList && this.form.segList.filter(v => v.feeMode === 'weight') || []
        this.form.volumeList = this.form.segList && this.form.segList.filter(v => v.feeMode === 'volume') || []
        this.form.piecesList = this.form.segList && this.form.segList.filter(v => v.feeMode === 'pieces') || []
        this.form.volumeWeightList = this.form.segList && this.form.segList.filter(v => v.feeMode === 'volumeWeight') || []
      }).finally(()=> {
        this.loading = false;
      });
      getAllCityInfo().then(res => {
        this.total1 = res.data.length
      });
      onlineList().then(res => {
        this.total2 = res.total
      });
    },
    closeDialog() {
      this.dialogVisible = false
      this.$emit('close')
    },
  }
};
</script>
<style lang="scss">
</style>
